// 组件中提交数据到Mutaions然后更改状态值最后我们再重新提交给组件二次渲染
// state getters actions mutations 中 state和mutations是必须的 getters和actions是按需的
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 调用Vuex状态管理器

// 那么我们直接使用的是mutations中定义的方法名来调用提交这个状态的,那么如果遇到重名的问题的话,应该怎么办
// 这时候我们只需要在定义这个模块的时候 namespaced: true 给每个模块加一个命名空间,然后调用的时候使用 模块名/方法名 的方法来提交这个方法即可
// 模块化状态管理器
const moduleA = {
  namespaced: true,
  state: {
    a: 1
  },
  mutations: {
    changeA (state) {
      state.a = '111'
    }
  }
}

const moduleB = {
  state: {
    b: 2
  },
  mutations: {
    changeB (state) {
      state.b = '222'
    }
  }
}

const moduleC = {
  state: {
    c: 3
  },
  mutations: {
    changeC (state) {
      state.c = '333'
    }
  }
}

// 当我们使用原始的状态管理器时,若是我们的组件组要非常非常多的状态的时候,我们的代码store页面中的代码量会边的越来越来冗余,且多个状态夹杂在一块的话就会变得超级超级的杂乱,这时候我们就需要将我们的代码按照一定的规律来划分为一个一个的模块来使用
// 创建状态管理器时整合 功能模块
const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB,
    moduleC
  }
})

// console.log(store) // 打印我们的仓store库
// console.log(store.state) // 拿到所有的状态  ----  对象模式
// console.log(store.state.moduleA.a) // 获取moduleA模块中的状态
// 改变状态  ---- 唯一改变状态的方式就是显示的提交mutation
// 提交的 mutation 不分模块，相当于把所有的mutations放到了一起
store.commit('changeA') // 直接就可以触发我们的changeA事件来提交我们的状态
store.commit('moduleA/changeA') // 在定义每个模块的时候给每个模块定义一个命名空间,这样就解决了我们不同的模块相同的方法名重名的问题了
// console.log(store.state.moduleA.a)
// 将这个变量暴露出去,这个是再我们的入口文件index.js中已经引入了
export default store
